<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>

<body>
    <div id="app">
        <!-- v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
            v-for 可以绑定数据到数组来渲染一个列表： -->
        <ol>
            <li v-for="site in sites">
                {{ site.text }}
            </li>
        </ol>
        <hr>
        <!-- v-for 还支持一个可选的第二个参数，参数值为当前项的索引： -->
        <ol>
            <li v-for="(site,index) in sites">
                {{index}} - {{ site.text }}
            </li>
        </ol>

        <hr>
        <!-- v-for 可以通过一个对象的属性来迭代数据： -->
        <ul>
            <li v-for="value in object">
                {{value}}
            </li>
        </ul>
        <!-- 也可以提供第二个的参数为键名： -->
        <ul>
            <li v-for="(value,key) in object">
                {{key}} - {{value}}
            </li>
        </ul>
        <!-- 第三个参数为索引： -->
        <ul>
            <li v-for="(value,key,index) in object">
                {{index}}.{{key}}: {{value}}
            </li>
        </ul>

        <hr>
        <!-- v-for 也可以循环整数 -->
        <ul>
            <li v-for="n in 5">
                {{n}}
            </li>
        </ul>

        <hr>
        <!-- 可以对数组的元素进行处理后再显示出来，一般可以通过创建一个计算属性，来返回过滤或排序后的数组。 -->
        <ul>
            <li v-for="n in enveNumbers">
                {{n}}
            </li>
        </ul>

        <hr>
        <!-- v-for 循环出列表，v-if 设置选中值：实例联合使用 v-for/v-if 给 select 设置默认值 -->
        <label for="option">请选择名称：</label><select @change="changeVal($event)" v-model="selOption" id="option">
            <template v-for="(temp,index) in webs" :temp="temp" :index="index" :key="temp.id">
                <!-- 索引为 1 的设为默认值，索引值从0 开始-->
                <option v-if="index == 0" :value="temp.name" selected>{{temp.name}} - {{index}}</option>
                <option v-else :value="temp.name">{{temp.name}} - {{index}}</option>
            </template>
        </select>
        <div>您选中了：{{selOption}}</div>

        <hr>
        <!--  -->
        <form v-on:submit.prevent="addNewTodo">
            <label for="new-todo">添加 todo</label>
            <input v-model="newTodoText" id="new-todo" placeholder="例如：明天早上跑步" required />
            <button>添加</button>
        </form>
        <ul>
            <todo-item v-for="(todo, index) in todos" :key="todo.id" :title="todo.title"
                @remove="todos.splice(index, 1)"></todo-item>
        </ul>
    </div>
    <script>
        const app = {
            data() {
                return {
                    sites: [
                        { text: 'Google' },
                        { text: 'Runoob' },
                        { text: 'Taobao' }
                    ],
                    object: {
                        name: '韩佳乐',
                        age: 18,
                        sex: '男',
                        motto: "待人宽如待己"
                    },
                    numbers: [1, 2, 3, 4, 5],
                    selOption: 'Runoob',
                    webs: [
                        { id: 1, name: 'Google' },
                        { id: 2, name: '韩佳乐' },
                        { id: 3, name: '赵飞燕' },
                        { id: 4, name: 'Runoob' },
                    ],
                    newTodoText: '',
                    todos: [
                        {
                            id: 1,
                            title: '看电影'
                        },
                        {
                            id: 2,
                            title: '吃饭'
                        },
                        {
                            id: 3,
                            title: '上 RUNOOB 学习'
                        }
                    ],
                    nextTodoId: 4

                }
            },
            computed: {
                enveNumbers() {
                    return this.numbers.filter(number => number % 2 == 0);
                }
            },
            methods: {
                // changeVal(event) {
                //     this.selOption = envet.target.temp;
                //     alert("你选中了：" + this.selOption);
                // }
                changeVal: function (event) {
                    this.selOption = event.target.value;
                    alert("你选中了" + this.selOption);
                },
                addNewTodo() {
                    if (this.newTodoText.trim() !== '') {
                        this.todos.push({
                            id: this.nextTodoId++,
                            title: this.newTodoText
                        });
                        this.newTodoText = '';
                    } else{
                        alert('不可添加空值！');
                    }

                }
            }
        }

        const a = Vue.createApp(app);
        /* 要确保 todo-item 组件在 Vue 实例初始化之前定义 */
        a.component('todo-item', {
            template: `
                <li>
                    {{ title }}
                    <button @click="$emit('remove')">删除</button>
                </li>`,
            props: ['title'],
            emits: ['remove']
        });
        a.mount('#app');
    </script>
</body>

</html>